<template>
  <start-dialog
      :read-only="props.readOnly"
      :model-value="drawerShow.start"
      :add-node-event-data="addNodeEvent"
      :data="graphCanvasData"
      @cancel="handleNodeDrawerCancel('start')"
      @confirm="handleNodeDrawerForm"
      @confirmModel="handleCanvasData"
  />

  <div v-if="drawerShow.condition">
    <condition-dialog
        :read-only="props.readOnly"
        :canvasData="graphCanvasData"
        :add-node-event-data="addNodeEvent"
        :data="currentDialogData"
        @cancel="handleNodeDrawerCancel('condition')"
        @confirm="handleNodeDrawerForm"
    />
  </div>

  <switch-dialog
      v-model:show="drawerShow['switcherConcurrent']"
      :read-only="props.readOnly"
      :dialog-data="currentDialogData"
      :add-node-event-data="addNodeEvent"
      @cancel="handleNodeDrawerCancel('switcherConcurrent')"
      @confirm="handleNodeDrawerForm"
  />

  <switch-dialog
      v-model:show="drawerShow['switcherCondition']"
      :read-only="props.readOnly"
      :dialog-data="currentDialogData"
      :add-node-event-data="addNodeEvent"
      @cancel="handleNodeDrawerCancel('switcherCondition')"
      @confirm="handleNodeDrawerForm"
  />

  <div v-if="drawerShow.abtest">
    <a-b-test-dialog
        :dialog-data="currentDialogData"
        :read-only="props.readOnly"
        :add-node-event-data="addNodeEvent"
        @cancel="handleNodeDrawerCancel('abtest')"
        @confirm="handleNodeDrawerForm"
    />
  </div>

  <div v-if="drawerShow.wait">
    <wait-dialog
        :dialog-data="currentDialogData"
        :read-only="props.readOnly"
        :add-node-event-data="addNodeEvent"
        @cancel="handleNodeDrawerCancel('wait')"
        @confirm="handleNodeDrawerForm"
    />
  </div>

  <div v-if="drawerShow.messageAction">
    <message-action-dialog
        :dialog-data="currentDialogData"
        :read-only="props.readOnly"
        :add-node-event-data="addNodeEvent"
        @cancel="handleNodeDrawerCancel('messageAction')"
        @confirm="handleNodeDrawerForm"
    />
  </div>

  <div v-if="drawerShow.emailAction">
    <email-action-dialog
        :dialog-data="currentDialogData"
        :read-only="props.readOnly"
        :add-node-event-data="addNodeEvent"
        @cancel="handleNodeDrawerCancel('emailAction')"
        @confirm="handleNodeDrawerForm"
    />
  </div>

  <div v-if="drawerShow.workWechatAction">
    <!-- 企微发送 -->
    <work-we-chat
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('workWechatAction')"
        :dialog-data="currentDialogData"
    ></work-we-chat>
  </div>

  <div v-if="drawerShow.publicNumberAction">
    <!-- 公众号模板消息 -->
    <public-number
        :canvasData="graphCanvasData"
        :read-only="props.readOnly"
        :add-node-event-data="addNodeEvent"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('publicNumberAction')"
        :dialog-data="currentDialogData"
    ></public-number>
  </div>

  <div v-if="drawerShow.appMessageAction">
    <!--app消息 -->
    <app-message
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('appMessageAction')"
        :dialog-data="currentDialogData"
    ></app-message>
  </div>

  <div v-if="drawerShow.appMessageBoxAction">
    <!-- app弹窗 -->
    <app-message-box
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('appMessageBoxAction')"
        :dialog-data="currentDialogData"
    ></app-message-box>
  </div>

  <div v-if="drawerShow.appNoticeAction">
    <!-- app通知 -->
    <app-notice
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('appNoticeAction')"
        :dialog-data="currentDialogData"
    ></app-notice>
  </div>

  <div v-if="drawerShow.miniProgramAction">
    <!-- 小程序通知 -->
    <mini-program
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('miniProgramAction')"
        :dialog-data="currentDialogData"
    ></mini-program>
  </div>

  <div v-if="drawerShow.weChatFriendMessageAction">
    <!-- 企微好友消息 -->
    <we-chat-friend-message
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('weChatFriendMessageAction')"
        :dialog-data="currentDialogData"
    ></we-chat-friend-message>
  </div>

  <div v-if="drawerShow.weChatAddFriendAction">
    <!-- 企微加好友 -->
    <we-chat-add-friend
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('weChatAddFriendAction')"
        :dialog-data="currentDialogData"
    ></we-chat-add-friend>
  </div>

  <div v-if="drawerShow.addTagAction">
    <!-- 添加标签 -->
    <add-tag
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('addTagAction')"
        :dialog-data="currentDialogData"
    ></add-tag>
  </div>

  <div v-if="drawerShow.delTagAction">
    <!-- 删除标签 -->
    <del-tag
        :canvasData="graphCanvasData"
        :read-only="props.readOnly"
        :add-node-event-data="addNodeEvent"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('delTagAction')"
        :dialog-data="currentDialogData"
    ></del-tag>
  </div>

  <div v-if="drawerShow.addCustomerGroupAction">
    <!-- 添加至客群 -->
    <add-customer-group
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('addCustomerGroupAction')"
        :dialog-data="currentDialogData"
    ></add-customer-group>
  </div>

  <div v-if="drawerShow.delCustomerGroupAction">
    <!-- 移出客群 -->
    <del-customer-group
        :add-node-event-data="addNodeEvent"
        :read-only="props.readOnly"
        @confirm="handleNodeDrawerForm"
        @cancel="handleNodeDrawerCancel('delCustomerGroupAction')"
        :dialog-data="currentDialogData"
    ></del-customer-group>
  </div>
</template>

<script lang="ts" setup>
import {inject} from 'vue'
import {Cell, Graph, Node} from "@antv/x6";
import {IAddNodeEvent, INodeData} from "@/views/workTable/types/nodeDrawer";
import useFrom from "@/views/workTable/compositions/useFrom";
import * as NodeEvent from "@/views/workTable/nodes/nodeEvent";
import {
  StartDialog,
  ConditionDialog,
  SwitchDialog,
  ABTestDialog,
  DelCustomerGroup,
  AddCustomerGroup,
  AddTag,
  DelTag,
  AppMessage,
  AppMessageBox,
  AppNotice,
  EmailActionDialog,
  MessageActionDialog,
  WaitDialog,
  MiniProgram,
  WeChatFriendMessage,
  WeChatAddFriend,
  WorkWeChat,
  PublicNumber
} from "./nodeDrawerIndex"


// import StartDialog from "@/components/marketingCanvas/Start.vue";
// import ConditionDialog from "@/components/marketingCanvas/Condition.vue";
// import SwitchDialog from "@/components/marketingCanvas/Switch.vue";
// import ABTestDialog from "@/components/marketingCanvas/ABTest.vue";
// import WaitDialog from "@/components/marketingCanvas/Wait.vue";
// import MessageActionDialog from "@/components/marketingCanvas/MessageAction.vue";
// import EmailActionDialog from "@/components/marketingCanvas/EmailAction.vue";
// import PublicNumber from "@/components/marketingCanvas/PublicNumber.vue";
// import WorkWeChat from "@/components/marketingCanvas/WorkWeChat.vue";
// import AppMessage from "@/components/marketingCanvas/AppMessage.vue";
// import AppMessageBox from "@/components/marketingCanvas/AppMessageBox.vue";
// import AppNotice from "@/components/marketingCanvas/AppNotice.vue";
// import MiniProgram from "@/components/marketingCanvas/MiniProgram.vue";
// import WeChatFriendMessage from "@/components/marketingCanvas/WeChatFriendMessage.vue";
// import WeChatAddFriend from "@/components/marketingCanvas/WeChatAddFriend.vue";
// import AddTag from "@/components/marketingCanvas/AddTag.vue";
// import DelTag from "@/components/marketingCanvas/DelTag.vue";
// import AddCustomerGroup from "@/components/marketingCanvas/AddCustomerGroup.vue";
// import DelCustomerGroup from "@/components/marketingCanvas/DelCustomerGroup.vue";

import {NodeDrawerDataModel} from "@/views/workTable/dataModel/NodeDrawerDataModel";
import Logger from "@/utils/logger"
import {useReplaceNodeReverse} from "@/views/workTable/compositions/useReplaceNode";

const props = withDefaults(defineProps<{
  readOnly?: boolean
}>(), {
  readOnly: false
})
const emits = defineEmits(['modify-canvas-data'])

const from = useFrom()

const worktableContext = inject('worktableContext')
const graphCanvasData = ref()
let graphInstance: Graph

const drawerShow = reactive({
  // example: false,
  start: false,
  condition: false,
  switcherConcurrent: false,
  switcherCondition: false,
  abtest: false,
  wait: false,
  messageAction: false,
  // event: false,
  // myEvent: false,
  emailAction: false,
  publicNumberAction: false,
  workWechatAction: false,
  appMessageAction: false,
  appMessageBoxAction: false,
  appNoticeAction: false,
  miniProgramAction: false,
  weChatFriendMessageAction: false,
  weChatAddFriendAction: false,
  addTagAction: false,
  delTagAction: false,
  addCustomerGroupAction: false,
  delCustomerGroupAction: false,
})
const addNodeEvent = ref<IAddNodeEvent>()
const currentDialogData = ref()

// Exposed
const showDrawer = ({ cell, graph, canvasData}: {cell: Cell, graph: Graph, canvasData: any}) => {
  if (from === 'sass') {
    return
  }

  graphInstance = graph
  graphCanvasData.value = canvasData
  addNodeEvent.value = {
    graph: graphInstance,
    cell: cell,
  }
  currentDialogData.value = cell.getData().dialogData

  const shape = cell.shape
  if (shape === "event") {
    drawerShow["condition"] = !drawerShow["condition"];
    return;
  }

  drawerShow[shape] = !drawerShow[shape]
}

const handleNodeDrawerForm = (nodeDrawerDataModel: NodeDrawerDataModel) => {
  const cell = addNodeEvent.value!.cell!

  // 处理节点数据
  const _cellData: INodeData = {
    dialogData: nodeDrawerDataModel.dialogData,
    dialogOpenWay: null
  }
  if (from === 'merchantTemplate') {
    // 表单通过点击确定，到这个步骤时，即视为通过表单校验
    _cellData.merchantTemplateFormValidateResult = {result: true}
  }
  cell.setData(_cellData)
  // cell.trigger("change:data", {current: cell.getData()}) // setData 里的数据为引用类型时 没有主动触发 'change:data' 事件

  // 抽屉对话框确认的后续事件处理
  const shape = cell.shape
  const {nodeDialogConfirm} = NodeEvent
  if (nodeDialogConfirm[shape]) {
    nodeDialogConfirm[shape]({cell, dialogData: nodeDrawerDataModel.dialogData}, graphInstance, worktableContext)
  }
}

const handleNodeDrawerCancel = (shape: string) => {
  drawerShow[shape] = !drawerShow[shape]
  const graph = addNodeEvent.value!.graph!
  const node = addNodeEvent.value!.cell!
  const nodeData: INodeData = node?.getData() ?? {dialogData: null, dialogOpenWay: null}

  if (nodeData.dialogOpenWay === 'create') {
    Logger.log('新建节点点击了取消')
    if (nodeData.placeholderNodeData) {
      Logger.log('新建节点是PlaceholderNode 替换而来的，替换PlaceholderNode...')
      useReplaceNodeReverse({operatingNode: node, graph})
    } else {
      Logger.log('放弃添加，删除节点...')
      graph.removeNode(node.id)
    }
  }

  // 清理当前操作数据
  currentDialogData.value = {}
}

// 处理当前画布数据
const handleCanvasData = (canvasDataProps: any) => {
  emits('modify-canvas-data', canvasDataProps)
}

defineExpose({
  showDrawer,
})
</script>

<style scoped lang="scss">

</style>

